/*
*@date:20180907
*@author: wj 
*@description: 按YLJ的接口文档《测试接口文档.docx》，5.查询电子监控文本信息 底层cmd：04C03
*              此接口为查询非现场简易违章，即电子监控抓拍,未确认，未缴款,可以在此基础上进行操作：
*              1.确认违章 -- 违章确认生成处罚决定书。使用接口：04C56电子监控简易程序处理写入接口
*              2.确认违章同时缴费 -- 违章确认，自动生成决定书，同时进行缴款流程。银行系统提供收据编号，收款机关字段，
*                若未正常先完成银行缴费流程，不能完成此请求提交。
*              
*/

<template>
    <div class="sys-page">
        <app-title :title="dialogTitle"></app-title>
        <app-notes>查询电子警察抓拍违章，可查看违章图片，可以进行确认操作来生成违章处罚决定书，也可直接进行缴款处理。
            调用接口：查询电子监控文本信息，查询电子监控照片信息，电子监控简易程序写入接口，电子监控简易程序处理并银行对账接口。
        </app-notes>
        
        <el-row>
            <el-col :span="20">
                <app-search>
                    <el-form :inline="true" :model="searchForm" :rules="searchRules" ref="searchForm">
                        <el-form-item prop="hphm">
                            <el-input v-model="searchForm.hphm" placeholder="请输入车辆号牌" ref="jdsbh"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="search">查询</el-button>
                        </el-form-item>
                    </el-form>
                </app-search>
            </el-col>
        </el-row>    
            <el-table v-loading="loading" border :data="tableData" :row-class-name="tableRowClassName">
                <el-table-column label="序号" width="100" prop="xh"></el-table-column>
                <el-table-column label="号牌号码" width="100" prop="hphm"></el-table-column>
                <el-table-column label="违章时间" width="100" prop="wfsj"></el-table-column>
                <el-table-column label="违章地点" width="100" prop="wfdd"></el-table-column>
                <el-table-column label="违章行为" width="180" prop="wfxw"></el-table-column>
                <el-table-column label="违章记分" width="180" prop="wfjfs"></el-table-column>
                <el-table-column label="罚款金额" width="180" prop="fkje"></el-table-column>
                <el-table-column label="处理状态" width="100" prop="clbj"></el-table-column>
                <el-table-column label="操作1" width="150">
                    <template slot-scope="scope">
                        <el-button size="small" border @click="viewPhotoProcess(scope.row)">查看电子违章图片</el-button>
                    </template>
                </el-table-column>
                <el-table-column label="操作2" width="150">
                    <template slot-scope="scope">
                        <el-button size="small" border @click="violateProcess(scope.row)">违章确认</el-button>
                    </template>
                </el-table-column>
                <el-table-column label="操作3" width="150">
                    <template slot-scope="scope">
                        <el-button size="small" border @click="violateWithFineProcess(scope.row)">确认并缴款</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-alert :title="errorMsg" type="warning" :closable="false" show-icon v-show="!reliable"> </el-alert>

            <el-dialog title="查询电子监控照片信息接口" :visible.sync="dialogPhotoVisible" width='90%'
            :fullscreen='false'>
            <el-row>
                <el-col :span="6" v-for="i in photourl" :key="i.url" >
                    <el-card :body-style="{ padding: '0px' }">
                    <img :src="i.url" class="image">
                    </el-card>
                </el-col>
            </el-row>
            
            <div slot="footer" class="dialog-footer">
            <el-button @click="dialogPhotoVisible = false">关 闭</el-button>
            </div>
        </el-dialog>

        <el-dialog title="电子监控简易程序处理写入接口" :visible.sync="dialogSurveilProcessVisible" width='50%'
            :fullscreen='false'>
            <el-form :model="surveilProcessForm" ref="surveilProcessForm"  >
            <el-form-item label="处罚序号" label-width="120px">
                <el-input ref="name" v-model="surveilProcessForm.xh" auto-complete="off" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="决定书编号" label-width="120px">
                <el-input ref="name" v-model="surveilProcessForm.jdsbh" auto-complete="off" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="处理机关" label-width="120px">
                <el-input ref="name" v-model="surveilProcessForm.cljg" auto-complete="off" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="处理时间" label-width="120px">
                <el-input ref="name" v-model="surveilProcessForm.clsj" auto-complete="off" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="经办人" label-width="120px">
                <el-input ref="name" v-model="surveilProcessForm.jbr1" auto-complete="off" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="人员分类" label-width="120px">
                <el-input ref="name" v-model="surveilProcessForm.ryfl" auto-complete="off" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="驾驶证号" label-width="120px">
                <el-input ref="name" v-model="surveilProcessForm.jszh" auto-complete="off" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="档案编号" label-width="120px">
                <el-input ref="name" v-model="surveilProcessForm.dabh" auto-complete="off" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="发证机关" label-width="120px">
                <el-input ref="name" v-model="surveilProcessForm.fzjg" auto-complete="off" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="准驾车型" label-width="120px">
                <el-input ref="name" v-model="surveilProcessForm.zjcx" auto-complete="off" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="当事人" label-width="120px">
                <el-input ref="name" v-model="surveilProcessForm.dsr" auto-complete="off" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="住所行政区划" label-width="120px">
                <el-input ref="name" v-model="surveilProcessForm.zsxzqh" auto-complete="off" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="住所详细地址" label-width="120px">
                <el-input ref="name" v-model="surveilProcessForm.zsxxdz" auto-complete="off" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="电话" label-width="120px">
                <el-input ref="name" v-model="surveilProcessForm.dh" auto-complete="off" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="处罚种类" label-width="120px">
                <el-input ref="name" v-model="surveilProcessForm.cfzl" auto-complete="off" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="罚款金额" label-width="120px">
                <el-input ref="name" v-model="surveilProcessForm.fkje" auto-complete="off" :disabled="true"></el-input>
            </el-form-item>
            <!--end-->
            </el-form>
            <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFineFormVisible = false">取 消</el-button>
            <el-button type="primary" v-loading="loading"
            @click.native.prevent="surveilProcessCommit('modform')">确 定</el-button>
            </div>
        </el-dialog>

            <el-dialog title="电子监控简易程序处理并银行对账接口" :visible.sync="dialogSurveilWithFineVisible" width='50%'
            :fullscreen='false'>
            <el-form :model="fineForm" ref="fineForm"  >
            <el-form-item label="序号" label-width="120px">
            <el-input ref="name" v-model="fineForm.xh" auto-complete="off" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="决定书编号" label-width="120px">
                <el-input ref="name" v-model="fineForm.jdsbh" auto-complete="off" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="处理机关" label-width="120px">
                <el-input ref="name" v-model="fineForm.cljg" auto-complete="off" :disabled="true"></el-input>
            </el-form-item>
             <el-form-item label="处理时间" label-width="120px">
                <el-input ref="name" v-model="fineForm.clsj" auto-complete="off" :disabled="true"></el-input>
            </el-form-item>
             <el-form-item label="经办人" label-width="120px">
                <el-input ref="name" v-model="fineForm.jbr1" auto-complete="off" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="人员分类" label-width="120px">
                <el-input ref="name" v-model="fineForm.ryfl" auto-complete="off" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="驾驶证号" label-width="120px">
                <el-input ref="name" v-model="fineForm.jszh" auto-complete="off" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="档案编号" label-width="120px">
                <el-input ref="name" v-model="fineForm.dabh" auto-complete="off" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="发证机关" label-width="120px">
                <el-input ref="name" v-model="fineForm.fzjg" auto-complete="off" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="准驾车型" label-width="120px">
                <el-input ref="name" v-model="fineForm.zjcx" auto-complete="off" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="当事人" label-width="120px">
                <el-input ref="name" v-model="fineForm.dsr" auto-complete="off" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="住所行政区划" label-width="120px">
                <el-input ref="name" v-model="fineForm.zsxzqh" auto-complete="off" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="住所详细地址" label-width="120px">
                <el-input ref="name" v-model="fineForm.zsxxdz" auto-complete="off" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="电话" label-width="120px">
                <el-input ref="name" v-model="fineForm.dh" auto-complete="off" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="处罚种类" label-width="120px">
                <el-input ref="name" v-model="fineForm.cfzl" auto-complete="off" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="罚款金额" label-width="120px">
                <el-input ref="name" v-model="fineForm.fkje" auto-complete="off" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="罚款收据编号" label-width="120px">
                <el-input ref="name" v-model="fineForm.fksjbh" auto-complete="off" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="收款机关" label-width="120px">
                <el-input ref="name" v-model="fineForm.skjg" auto-complete="off" :disabled="true"></el-input>
            </el-form-item>
            <!--end-->
            </el-form>
            <div slot="footer" class="dialog-footer">
            <el-button @click="dialogSurveilProcessVisible = false">取 消</el-button>
            <el-button type="primary" v-loading="loading"
            @click.native.prevent="survWithFineCommit('fineForm')">确 定</el-button>
            </div>
        </el-dialog>
    </div>

</template>
<style>
  .el-table .warning-row {
    background: #F08080;
  }

  .el-table .success-row {
    background:#f0f9eb;
  }
</style>

<script>
export default {
    data(){
        return {
            url:  '../../trffweb/services/TmriOutAccess/queryObjectOut6.shtml',
            url2: '../../trffweb/services/TmriOutAccess/queryObjectOut10.shtml',
            url3: '../../trffweb/services/TmriOutAccess/writeObjectOut1.shtml',
            url4: '../../trffweb/services/TmriOutAccess/writeObjectOut3.shtml',

            dialogTitle:"电子违章查询和处理",
            dialogFineFormVisible: false,
            dialogPhotoVisible: false,
            dialogSurveilProcessVisible: false,
            dialogSurveilWithFineVisible: false,
            loading: false,
            processDlgVisible:false,
            tableData:[],
            photourl: [
                {
                    url:'/static/timg.jpeg'
                },
                {
                    url:'/static/timg.jpeg'
                },
                {
                    url:'/static/timg.jpeg'
                }
                ],
            errorMsg:"您的信息有误，请联系管理员修改",
            reliable:true,
            photoReqForm: {
                xtlb: '01',
                jkxlh: '791F0909030617040815E6958E9DFF8FFC9E39343238575840746D72692E636E',
                jkid: '04C04',
                type: '10',
                xh: ''
            },
            searchForm: {
                userId: 'terminal-0192',
                hphm: '粤A88888' ,
                hpzl: '02',
                clbj: '0',
                idCard:'420101198901088300',
                source: "10.10.29.2"
            },
            surveilProcessForm: {
                //固有字段
                xtlb: '01',
                jkxlh: '791F0909030617040815E6958E9DFF8FFC9E39343238575840746D72692E636E',
                jkid: '04C56',
                type: '8',
                /**********************************************/
                //wj20180907：用户输入表单，从row数据来，现在暂时用静态数据
                xh: '123456789012',
                jdsbh:'1234567890123',
                cljg: '茂名交管大队三中队',
                clsj: '2018-09-07 12:35',
                jbr1: '王杰',
                ryfl: '4-公安驾驶证',
                jszh: '421003198810151023',
                dabh:'12345678990123',
                fzjg: '茂名市公安局',
                zjcx:'C1',
                dsr: '王伟',
                zsxzqh: '广州市花都区',
                zsxxdz: '广州市花都区万科美丽1栋301',
                dh: '138092897871',
                lxfs: '',
                cfzl: '罚款',
                fkje: '200'
            },
            fineForm: {
                //固有字段
                xtlb: '01',
                jkxlh: '791F0909030617040815E6958E9DFF8FFC9E39343238575840746D72692E636E',
                jkid: '04C61',
                type: '11',
                /**********************************************/
                //wj20180907：用户输入表单，从row数据来，现在暂时用静态数据
                xh: '123456789012',
                jdsbh:'1234567890123',
                cljg: '茂名市公安局茂东分局',
                cljg: '茂名交管大队三中队',
                clsj: '2018-09-07 12:35',
                jbr1: '王杰',
                ryfl: '4-公安驾驶证',
                jszh: '421003198810151234',
                dabh: '23412344321',
                fzjg: '茂名市公安局',
                zjcx:'C1',
                dsr: '王伟',
                zsxzqh: '广州市花都区',
                zsxxdz: '广州市花都区万科美丽1栋301',
                dh: '138092897871',
                lxfs: '',
                cfzl: '罚款',
                fkje: '200',
                fksjbh: '89-3923890', //由银行缴款后银行返回的字段，暂时静态写入
                skjg: '中国农业银行茂名支行'//暂时静态写入
            },

             searchRules: {
                hphm: [
                    { required:true, message: '请输入车辆号牌', trigger: 'blur' }
                ]
            }

       }
    },
    mounted(){
    },
    methods:{
        tableRowClassName({row, rowIndex}) {
          if(this.reliable === false){
            return 'warning-row';
          }else{
              return 'success-row'
          }
        },
        search(){
            this.$refs.searchForm.validate((valid)=>
            {
                if(valid){
                    
                    this.HTTP.methods.apiPost(this.url, this.searchForm).then(res =>
                    {
                        if(res.code != 200){
                            this.$message({
                            message: res.msg,
                            type: 'error'
                            })                              
                        }else{
                            this.tableData = res.data
                            this.loading = false
                        }
                    })
                }
            })                 
        },
        //违章确认
        surveilProcessCommit(){  
            this.HTTP.methods.apiPost(this.url3, this.surveilProcessForm).then(res =>
            {
                if(res.code != 200){
                    this.$message({
                    message: '提交失败',
                    type: 'error'
                    })                              
                }else{
                    this.$message({
                    message: '提交成功',
                    type: 'success'
                    }) 
                    this.dialogSurveilProcessVisible = false  
                }              
            })
        },
        //违章确认并直接缴款
        survWithFineCommit(){
            this.HTTP.methods.apiPost(this.url4, this.surveilProcessForm).then(res =>
            {
                if(res.code != 200){
                    this.$message({
                    message: '提交失败',
                    type: 'error'
                    })                              
                }else{
                    this.$message({
                    message: '提交成功',
                    type: 'success'
                    }) 
                    this.dialogSurveilWithFineVisible = false  
                }               
            })
        },
        //向后台请求当条电子违章的照片
        viewPhotoProcess(row){
            //请求
            this.photoReqForm.xh = row.xh
            this.HTTP.methods.apiPost(this.url2, this.photoReqForm).then(res =>
            {
                if(res.code != 200){
                    this.$message({
                    message: '查询失败',
                    type: 'error'
                    })                              
                }else{
                    
                    this.dialogPhotoVisible = true  
                }
                
            })
        },
       
        violateProcess(row){
            this.dialogSurveilProcessVisible = true
            console.log(row)
        },

        violateWithFineProcess(row) {
            this.dialogSurveilWithFineVisible = true
        }
    }
}
</script>

<style>
  .time {
    font-size: 13px;
    color: #999;
  }
  
  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    width: 80%;
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
      display: table;
      content: "";
  }
  
  .clearfix:after {
      clear: both
  }
</style>

    
